<!-- components/procurement/ProductDetail.vue -->
<template>
  <el-drawer
    v-model="visible"
    title="商品详情"
    size="600px"
    @close="handleClose"
  >
    <div class="product-detail" v-if="product">
      <!-- 基本信息 -->
      <el-card class="detail-card" shadow="never">
        <template #header>
          <div class="card-header">
            <span>基本信息</span>
          </div>
        </template>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">商品名称:</span>
              <span class="value">{{ product.name }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">商品分类:</span>
              <span class="value">{{ product.category }}</span>
            </div>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">规格:</span>
              <span class="value">{{ product.specification }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">单位:</span>
              <span class="value">{{ product.unit }}</span>
            </div>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">单价:</span>
              <span class="value">¥{{ formatCurrency(product.unitPrice) }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="label">库存数量:</span>
              <span class="value">{{ product.stockQuantity }}</span>
            </div>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="24">
            <div class="detail-item">
              <span class="label">备注:</span>
              <span class="value">{{ product.remark || '-' }}</span>
            </div>
          </el-col>
        </el-row>
      </el-card>
      
      <!-- 入库记录 -->
      <el-card class="detail-card" shadow="never">
        <template #header>
          <div class="card-header">
            <span>入库记录</span>
          </div>
        </template>
        
        <el-table :data="inboundRecords" style="width: 100%" class="records-table">
          <el-table-column prop="inboundNumber" label="入库单号" min-width="120" />
          <el-table-column prop="supplierName" label="供应商" width="120" />
          <el-table-column prop="quantity" label="入库数量" width="100" />
          <el-table-column prop="unitPrice" label="单价" width="100">
            <template #default="{ row }">
              ¥{{ formatCurrency(row.unitPrice) }}
            </template>
          </el-table-column>
          <el-table-column prop="inboundDate" label="入库日期" width="120">
            <template #default="{ row }">
              {{ formatDate(row.inboundDate) }}
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      
      <!-- 操作记录 -->
      <el-card class="detail-card" shadow="never">
        <template #header>
          <div class="card-header">
            <span>操作记录</span>
          </div>
        </template>
        
        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in activities"
            :key="index"
            :timestamp="activity.timestamp"
            placement="top"
          >
            <el-card>
              <h4>{{ activity.content }}</h4>
              <p>{{ activity.operator }} {{ activity.time }}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-card>
    </div>
    
    <template #footer>
      <div style="text-align: right">
        <el-button @click="handleClose">关闭</el-button>
        <el-button type="primary" @click="handleEdit">编辑商品</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { formatCurrency, formatDate } from '@/utils/formatters'

interface Product {
  id: number
  name: string
  category: string
  specification: string
  unit: string
  unitPrice: number
  stockQuantity: number
  remark: string
}

interface InboundRecord {
  id: number
  inboundNumber: string
  supplierName: string
  quantity: number
  unitPrice: number
  inboundDate: string
}

interface Activity {
  content: string
  timestamp: string
  operator: string
  time: string
}

const props = defineProps<{
  modelValue: boolean
  product: Product | null
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
  (e: 'close'): void
  (e: 'edit', product: Product): void
}>()

const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

// 模拟入库记录
const inboundRecords = computed<InboundRecord[]>(() => {
  if (!props.product) return []
  
  return [
    {
      id: 1,
      inboundNumber: 'IN20230101001',
      supplierName: '阿里巴巴集团',
      quantity: 2,
      unitPrice: 25000,
      inboundDate: '2023-01-05'
    },
    {
      id: 2,
      inboundNumber: 'IN20230201001',
      supplierName: '腾讯科技',
      quantity: 5,
      unitPrice: 24500,
      inboundDate: '2023-02-05'
    }
  ]
})

// 模拟操作记录
const activities = computed<Activity[]>(() => {
  if (!props.product) return []
  
  return [
    {
      content: '创建商品',
      timestamp: '2023-01-01',
      operator: '张三',
      time: '09:30'
    },
    {
      content: '更新库存',
      timestamp: '2023-01-05',
      operator: '李四',
      time: '10:15'
    },
    {
      content: '调整价格',
      timestamp: '2023-02-01',
      operator: '王五',
      time: '14:20'
    }
  ]
})

const handleClose = () => {
  emit('close')
  visible.value = false
}

const handleEdit = () => {
  if (props.product) {
    emit('edit', props.product)
  }
}
</script>

<style scoped>
.product-detail {
  height: 100%;
  overflow-y: auto;
}

.detail-card {
  margin-bottom: 16px;
}

.detail-item {
  display: flex;
  margin-bottom: 8px;
}

.label {
  width: 80px;
  font-weight: bold;
  color: #606266;
}

.value {
  flex: 1;
  color: #303133;
}

.records-table {
  margin-bottom: 10px;
}
</style>